<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl" style="color: #4e598c">
        功能点击次数对比（均值）
      </div>
    </div>
    <div class="md:flex">
      <AppStepTimePicker
          ref="AppStepTimePickerRef"
          class="w-full enter-x"
          stepConfig="average-function-clicks"
          v-bind="props"
          @success="handleSuccess"
      >
      </AppStepTimePicker>
    </div>
    <div class="md:flex">
      <div :id="aveFunctionClicksBar" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import moment from 'moment';
import * as echarts from 'echarts';
import { FuncClicksAverageDto, FuncClicksSummaryDto } from '/@/api/operation-center/app-operation/function-analysis/model/functionAnalysisModel';
import { getFunctionClicksAverage } from '/@/api/operation-center/app-operation/function-analysis/functionAnalysis';
import AppStepTimePicker from '/@/views/operation-center/components/AppStepTimePicker.vue';

let startDate = moment().add(-9, 'months').format('YYYY-MM-DD HH:mm:ss');
let stepTimeRange = {
  stepType: 0,
  startTime: startDate,
  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
};
const initAppStepTimeRange = {
  appId: '',
  stepType: 0,
  startTime: moment(stepTimeRange.startTime, 'YYYY-MM'),
  endTime: moment(stepTimeRange.endTime, 'YYYY-MM'),
};

const props = ref({
  cardType: '',
  stepConfig: 'app-active-users-in-total',
  initData: initAppStepTimeRange,
});

const AppStepTimePickerRef = ref();

const aveFunctionClicksBar = 'average-function-clicks-bar-chart';

var fuctionClicksOption: any;

let timeList: string[] = [];
let seriesList: any[] = [];

function convertToFuncGroupBarData(res: FuncClicksAverageDto[]) {
  res.forEach((item) => {
    timeList.push(item.time);
    let funcClickList: FuncClicksSummaryDto[] = item.functionClickNumsRespDtos;

    funcClickList.forEach((funcClickDto) => {
      let filterdSeriesItemList = seriesList.filter((m) => { return m.name === funcClickDto.functionName });
      if (filterdSeriesItemList.length === 0) {
        let seriesItem = {
          name: funcClickDto.functionName, 
          type: 'bar', 
          barGap: 0, 
          data: [], 
        };
        seriesList.push(seriesItem);
      }
      
      let filterdSeriesItem = seriesList.filter((m) => { return m.name === funcClickDto.functionName })[0];
      filterdSeriesItem.data.push(funcClickDto.num);
    });
  })
}

function initBarGroupChart(barChartName: string, xAxisData: string[], seriesData: any[], option: any) {
  let barDom = document.getElementById(barChartName);
  let myChart = echarts.init(barDom);

  option = {
    tooltip: {
      trigger: 'axis', 
      axisPointer: {
        type: 'shadow', 
      }, 
    }, 
    grid: {
      left: '0%', 
      right: '0%', 
      bottom: '10%', 
      top: '10%', 
      containLabel: true, 
    }, 
    calculable: true, 
    xAxis: [
      {
        type: 'category', 
        axisTick: { show: false }, 
        data: xAxisData, 
      }, 
    ], 
    yAxis: [
      {
        type: 'value', 
      }, 
    ], 
    series: seriesData, 
  };

  option && myChart.setOption(option);
}

const handleSuccess = (params) => {
  timeList = [];
  seriesList = [];

  getFunctionClicksAverage(params).then((res) => {
    convertToFuncGroupBarData(res);

    setTimeout(()=>{
      initBarGroupChart(aveFunctionClicksBar, timeList, seriesList, fuctionClicksOption)
    }, 300);
  })
}

</script>
